<template>
  <!-- 全局的Tabbar -->
  <div class="Tabbar">
    <router-link :to="{ name: 'home' }">
      <div class="icon" @click="changeColor(1)">
        <img
          :src="
            currentBar == 1
              ? 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-h02.svg'
              : 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-h01.svg'
          "
        />
        <p>首页</p>
      </div>
    </router-link>
    <router-link :to="{ name: 'teach' }">
      <div class="icon" @click="changeColor(2)">
        <img
          :src="
            currentBar == 2
              ? 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-c02.svg'
              : 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-c01.svg'
          "
        />
        <p>教程</p>
      </div>
    </router-link>
    <router-link :to="{ name: 'school' }">
      <div class="icon" @click="changeColor(3)">
        <img
          :src="
            currentBar == 3
              ? 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-t02.svg'
              : 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-t01.svg'
          "
        />
        <p>网校</p>
      </div>
    </router-link>
    <router-link :to="{ path: '/painter' }">
      <div class="icon" @click="changeColor(4)">
        <img
          :src="
            currentBar == 4
              ? 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-d02.svg'
              : 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-d01.svg'
          "
        />
        <p>大触</p>
      </div>
    </router-link>

    <router-link :to="{ path: '/community' }">
      <div class="icon" @click="changeColor(5)">
        <img
          :src="
            currentBar == 5
              ? 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-cm02.svg'
              : 'https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-cm01.svg'
          "
        />
        <p>社区</p>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  data() {
    return {
      currentBar: 1,
      routemaps: {
        "/": {
          id: 1,
        },
        "/teach": {
          id: 2,
        },
        "/school": {
          id: 3,
        },
        "/painter": {
          id: 4,
        },
        "/community": {
          id: 5,
        },
        "/painter/": {
          id: 4,
        },
        "/painter/talk": {
          id: 4,
        },
        "/painter/product": {
          id: 4,
        },
      },
    };
  },
  watch: {
    $route(to) {
      if(this.routemaps[to.path]){
        console.log(to);
      this.currentBar = this.routemaps[to.path].id;
      }else{
        console.log(to.path);
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    changeColor(index) {
      console.log(index);
      this.currentBar = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.Tabbar {
  // margin-top: 50px;
  width: 100vw;
  height: 50px;
  @include flex-around;
  position: fixed;
  background-color: #f8f8f8;
  bottom: 0;
  .icon {
    @include flex-column;
    img {
      width: 26px;
      height: 24px;
      background-size: 26px 24px;
    }
    p {
      color: $color-gray;
    }
  }
}
</style>
